<template>
  <div id="productListDialog">
     <el-dialog title="产品列表" :visible.sync="dialogTableVisible" :before-close="close" :close-on-click-modal="false">
      <el-col :span="6" :offset="18" class="searchBox">
        <el-input placeholder="请选择产品" icon="search" v-model.trim="search" @change="searchCoupon">
        </el-input>
      </el-col>
      <el-table height="400" ref="multipleTable" :data="productShow"  tooltip-effect="dark" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="name" label="产品名称" width="150"></el-table-column>
        <el-table-column prop="issuerName" label="发行方" width="150"></el-table-column>
        <el-table-column prop="account" label="募集额度" show-overflow-tooltip></el-table-column>
        <el-table-column prop="payedAccount" label="已付款金额" show-overflow-tooltip></el-table-column>
        <el-table-column prop="prodStatus" label="上/下架状态" show-overflow-tooltip></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>  
</template>
<script>
export default {
  data () {
    return {
      dialogTableVisible: true,
      search: '',
      productShow: null,
      productList: null,
      selProductList: []
    }
  },
  created () {
    this.getProductList()
  },
  methods: {
    getProductList () {
      this.$http.get('/api-active/v1/api/product/list')
        .then((response) => {
          let data = response.body;
          this.productList = data.result;
          this.productShow = this.productList;
        })
    },
    close () {
      this.$emit('close')
    },
    searchCoupon () {
      let arr = [];
      let str = this.search;
      for (let key in this.productList) {
        if (this.productList[key].name.indexOf(str) >= 0) {
          arr.push(this.productList[key]);
        }
      }
      this.productShow = arr;
    },
    handleSelectionChange (parm) {
      this.selProductList = parm
    },
    submit () {
      let arr = [...this.selProductList];
      arr.forEach(element => {
        element.newAdd = true
      });
      this.$emit('addProduct', arr)
    }
  }
}
</script>
<style lang="less" scoped>
   .searchBox{
      position: absolute;
      top:10px;
      right:80px;
    }
</style>
